<script setup>
import TailTopNav from "@/components/tailTopNav/TailTopNav.vue"
import TailLogo from "@/components/tailLogo/TailLogo.vue"
import {useRouter} from "vue-router"
import {toHomeByPush} from "@/utils/router_utils.js"
import {
  DROP_DOWN_MENU_VERTICAL_ALIGN_WAY_CENTER,
  DROP_DOWN_MENU_VERTICAL_ALIGN_WAY_RIGHT
} from "@/constant/tail_drop_down_constant.js"
import {ref} from 'vue'
import {disabledBodyScroll, enabledBodyScroll} from "@/utils/style_utils.js"
import {CAROUSEL_IMAGE_DISPLAY_MODE_COVER} from "@/constant/tail_carousel_constant.js"
import {
  ROUTE_NAME_BUSINESS_AUTHENTICATION,
  ROUTE_NAME_BUSINESS_HOME,
  ROUTE_NAME_LOGIN_DEFAULT, ROUTE_NAME_USER, ROUTE_NAME_USER_REAL_NAME
} from "@/constant/router_const.js"
import useRSAStore from "@/store/modules/rsa.js"
import {getCommonPublicKeyAPI} from "@/api/rsa.js"

/**
 * 获取并保存通用的 RSA 公钥
 */
// RSA Store
const RSAStore = useRSAStore()
// 从服务端获取通用的 RSA 公钥
getCommonPublicKeyAPI().then(
    publicKey => {
      // 保存通用的 RSA 公钥
      RSAStore.saveCommonKeyPair(publicKey)
    }
)

/**
 * router 对象
 */
const router = useRouter()

/**
 * logo 组件数据
 */
// logo 组件点击事件处理器函数
function logoClickHandler() {
  // 跳转到主页
  toHomeByPush(router)
}

// logo 文字
const logoText = '小尾巴书城'
// 是否开启 logo 图标
const enableLogoImg = false

/**
 * 导航栏菜单项数据
 */
// 小尾巴书城菜单项
const bookMallNavItem = {
  text: '小尾巴书城',
  subItems: [
    {
      menuItemText: '首页', menuItemClickHandler: () => {
        toHomeByPush(router)
      }
    },
  ]
}
// 小尾巴书城商家平台菜单项
const bookMallBusinessNavItem = {
  text: '商家平台',
  subItems: [
    {
      menuItemText: '首页', menuItemClickHandler: () => {
        router.push({name: ROUTE_NAME_BUSINESS_HOME})
      }
    },
    {
      menuItemText: '商家认证', menuItemClickHandler: () => {
        router.push({name: ROUTE_NAME_BUSINESS_AUTHENTICATION})
      }
    },
  ]
}
// 用户菜单项
const bookMallUserNavItem = [
  {
    menuItemText: '登录',
    menuItemClickHandler: () => {
      router.push({name: ROUTE_NAME_LOGIN_DEFAULT})
    }
  },
  {
    menuItemText: '用户中心',
    menuItemClickHandler: () => {
      router.push({name: ROUTE_NAME_USER_REAL_NAME})
    }
  },
]
// 导航栏菜单项
const navItems = [
  bookMallNavItem,
  bookMallBusinessNavItem
]

/**
 * 侧边导航栏的显示与隐藏
 */
// 控制侧边导航栏的显示与隐藏
const sliderNavIsShow = ref(false)

// 显示侧边导航栏
function showSliderNav() {
  // 禁止页面滚动
  disabledBodyScroll()
  // 显示侧边导航栏
  sliderNavIsShow.value = true
}

// 隐藏侧边导航栏
function hideSliderNav() {
  // 隐藏侧边导航栏
  sliderNavIsShow.value = false
  // 恢复页面滚动
  enabledBodyScroll()
}

/**
 * 背景图片数据
 */
const bgImgUrls = [
  '/images/background_1.jpg',
  '/images/bg-2.jpg',
]
</script>

<template>
  <!-- App 组件 -->
  <div class="app">
    <!-- 顶部导航栏 -->
    <TailTopNav class="top-nav">
      <!--
        顶部导航栏 logo
        关闭 logo 图片
      -->
      <template #topNavLogo>
        <TailLogo
            :logo-click-handler="logoClickHandler"
            :enable-logo-image="enableLogoImg"
            :logo-text="logoText"
        ></TailLogo>
      </template>
      <!-- 顶部导航栏选项 -->
      <template #topNavItems>
        <TailDropDown
            class="top-nav-item"
            v-for="navItem in navItems"
            :text-link="navItem.text"
            :menu-items="navItem.subItems"
            :menu-distance-with-link="'1rem'"
            :menu-vertical-align="DROP_DOWN_MENU_VERTICAL_ALIGN_WAY_CENTER"
        >
          <template #dropDownLinkIcon>
            <span class="iconfont">&#xe634;</span>
          </template>
        </TailDropDown>
        <TailDropDown
            class="top-nav-item"
            :enable-image-link="true"
            :image-link-url="'/images/head.jpg'"
            :menu-items="bookMallUserNavItem"
            :menu-distance-with-link="'1rem'"
            :menu-vertical-align="DROP_DOWN_MENU_VERTICAL_ALIGN_WAY_RIGHT"
        ></TailDropDown>
      </template>
      <!-- 顶部导航栏选项收起后侧边导航栏展示按钮 -->
      <template #sliderNavDisplayBtn>
        <span
            class="iconfont"
            @click="showSliderNav"
        >&#xe63b;</span>
      </template>
    </TailTopNav>
    <!-- 侧边导航栏 -->
    <TailSliderNav
        class="slider-nav"
        v-show="sliderNavIsShow"
        :close-btn-click-handler="hideSliderNav"
        :cover-click-handler="hideSliderNav"
        :bg-image-url="'/images/bg-3.jfif'"
    >
      <!-- 侧边导航栏关闭按钮 -->
      <template #sliderNavCloseBtn>
        <span class="iconfont">&#xe6b5;</span>
      </template>
      <!-- 侧边导航栏 logo -->
      <template #sliderNavLogo>
        <TailLogo
            :logo-click-handler="logoClickHandler"
            :enable-logo-image="enableLogoImg"
            :logo-text="logoText"
        ></TailLogo>
      </template>
      <!-- 侧边导航栏项 -->
      <template #sliderNavItems>
        <TailSubMenu
            class="slider-nav-item"
            v-for="navItem in [...navItems, {text: '用户中心', subItems: bookMallUserNavItem}]"
            :title-text="navItem.text"
            :sub-menu-items="navItem.subItems"
        >
          <template #subMenuDropIcon>
            <span class="iconfont">&#xe634;</span>
          </template>
        </TailSubMenu>
      </template>
    </TailSliderNav>
    <!-- 全屏背景 -->
    <TailCarousel
        class="full-bg"
        :carousel-height="'100vh'"
        :carousel-width="'100%'"
        :carousel-interval="60000"
        :images-url="bgImgUrls"
        :image-display-mode="CAROUSEL_IMAGE_DISPLAY_MODE_COVER"
        :enable-bottom-gradient-cover="true"
        :bottom-gradient-cover-height="2"
    >
      <template #carouselPreImageBtn>
        <span class="iconfont">&#xe665;</span>
      </template>
      <template #carouselNextImageBtn>
        <span class="iconfont">&#xe667;</span>
      </template>
    </TailCarousel>
    <!-- 一级路由展示区域 -->
    <router-view></router-view>
  </div>
</template>

<style lang="scss">

.app {
  position: relative;
  width: 100%;

  /*
   * 顶部导航栏
   */
  .top-nav {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 100;

    /*
     * 顶部导航栏项
     */
    .top-nav-item {
      font-weight: bold;
    }
  }

  /*
   * 侧边导航栏
   */
  .slider-nav {

    /*
     * 侧边导航栏项
     */
    .slider-nav-item {
      font-weight: bold;
    }
  }

  /*
   * 全屏背景
   */
  .full-bg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
}
</style>